// Captcha: 全自动区分人与计算机的图灵测试（验证码）
// 细节：
// 1.验证码实质上是啥？  图片
// 2.验证码可以被点击，可难存在看不清的的情况
// 3.验证码的获取方式：
//      a.验证码是由后端产生的且由后盾验证
//      b。俩种方式：
//          ①后盾直接获取
//          ②后盾输出图片的编码字符串
//            无论是哪一种方式，用法是一样的，如果是直接输出图片，那么我们只需要将图片地址给到img标签的src属性;如果是编码字符串，则也是给到img的src属性。
//4．验证码在做前端后端分离项目的时候，后端除了给验证码以外，还会给到一个key值，请注意k值与验证码是唯一一一对应匹配的【要理解key值得作用】，kry值后续需要在提交用户输入的验证码的时候一并提交给服务器（前端需要负责key值得临时存储，获取之后，提交之前）
// 5．既然是封装就得考虑全面一些，还需要考虑验证码的尺寸大小的通用性子
// 6.key值存储的问题，存在父组件中还是存在当前组建件的state中？【谁调用谁存储，如果存在当前组件中会存在key值被覆盖的情况】


// 使用方法：
// a。需要在使用验证码的组件中去导入并使用验证码组件
// b。该组件接受三个props属性
//    w:验证码的宽度
//    h:验证码的高度
//    
import React, { Component } from 'react';
import axios from "axios"
class Captcha extends Component {
  state = {}
  source = axios.CancelToken.source()
  render() {
    let w = this.props.w || 120
    let h = this.props.h || 40
    return (
      <>
        <img src={this.state.img} alt="点击刷新验证码" onClick={this.loadCaptcha.bind(this)} width={w} height={h} />
      </>
    );
  }
  componentDidMount() {
    this.loadCaptcha()
  }
  loadCaptcha() {
    axios.get("https://reactapi.iynn.cn/captcha/api/math", {
      CancelToken: this.source.token
    }).then((res) => {
      this.setState({
        // 验证码的key值
        key: res.data.key,
        // 验证码的编码字符串
        img: res.data.img
      })
      // 假设父传递一个
      this.props.setKey(res.data.key)
    })
      .catch(e => { })
  }
  componentWillUnmount() { 
    this.source.cancel()
  }
}

export default Captcha;

